<template>
	<view>
		<view class="u-flex u-flex-items-center amount_box" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @click.stop="openKeyboard">
			<view :data-index="-1" @click.stop="indexChange">
				<uni-icons size="17" color="#333333" custom-prefix="iconfont" type="icon-jiage"></uni-icons>
			</view>
			<view class="u-flex u-flex-items-center input_bar">
				<view class="fade" :class="[curIndex==0?'showFade':'hideFade']"></view>
				<block v-for="(item, index) in amountVal" :key="index">
					<view class="amount Medium" :data-index="index" @click.stop="indexChange">{{item}}</view>
					<view class="fade" :class="[curIndex>0 && curIndex==index+1?'showFade':'hideFade']"></view>
				</block>
			</view>
		</view>
		<cu-keyboard ref="cukeyboard" :safeAreaInsetBottom="true" :confirmStyle="amountVal<0.01?disabled:undisabled" :amount="amountVal" :miniMoney="0.01" :curIndex="curIndex" @change="amountChange" @confirm="confirmOrder" @close="inputClose" @open="inputOpen"></cu-keyboard>
	</view>
</template>

<script>
	export default {
		name: 'amountInput',
		props: {
			amountVal: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 禁用样式
				disabled: {
					color: '#888888',
					backgroundColor: '#E5E5E5'
				},
				// 启用样式 
				undisabled: {
					color: '#FFFFFF',
					backgroundColor: '#4179FF'
				},
				startData: {
					clientX: 0,
					clientY: 0
				},
				status: false,
				curIndex: 0
			}
		},
		methods: {
			resetCursor() {
				// 重置光标
				this.curIndex = 0;
			},
			openKeyboard() {
				// 打开键盘
				this.$refs.cukeyboard.open();
			},
			closeKeyboard() {
				// 关闭键盘
				this.$refs.cukeyboard.close();
			},
			inputOpen() {
				this.$emit("open");
			},
			inputClose() {
				this.$emit("close");
			},
			amountChange(val) {
				// 增加
				if (val.length > this.amountVal.length) {
					this.curIndex++;
				}
				// 删除
				if (val.length < this.amountVal.length) {
					this.curIndex--;
				}
				// 赋值
				// this.amount = val;
				this.$emit("change", val);
			},
			confirmOrder(val) {
				// 确认
				console.log(val);
			},
			touchStart(e) {
				var that = this;
				// 是否执行
				that.status = true;
				that.startData.clientX = e.changedTouches[0].clientX;
			},
			touchMove(e) {
				var that = this;
				var subX = e.changedTouches[0].clientX - that.startData.clientX;
				// 手指松开停止执行
				if (!that.status) {
					return;
				}
				// 判断手指滑动方向
				if (subX > 10) {
					uni.$u.throttle(() => {
						if (that.curIndex < that.amountVal.length) {
							that.curIndex++;
						}
					}, 500);
				} else if (subX < -10) {
					uni.$u.throttle(() => {
						if (that.curIndex > 0) {
							that.curIndex--;
						}
					}, 500);
				}
			},
			touchEnd() {
				// 是否执行
				this.status = false;
			},
			indexChange(e) {
				// 更新索引
				let index = e.currentTarget.dataset.index;
				this.curIndex = index + 1;
				this.openKeyboard(); //打开键盘
			}
		}
	}
</script>

<style lang="scss">
	.amount_box {
		position: relative;
		z-index: 20;
		height: 102rpx;

		.input_bar {
			width: 600rpx;
			height: 102rpx;

			.amount {
				color: #333333;
				font-size: 40rpx;
			}

			.showFade {
				visibility: visible;
			}

			.hideFade {
				visibility: hidden;
				width: 4rpx;
			}

			.fade {
				width: 4rpx;
				height: 50rpx;
				background-color: #4179FF;
				border-radius: 2rpx;
				animation: fadeAnimation 1.2s infinite;
			}

			@keyframes fadeAnimation {
				0% {
					opacity: 1;
				}

				50% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}
		}
	}
</style>